<template>
    <div class="root">   
        <div class="container">
            <div class="time">
                <timers></timers>
            </div>
            <div class="nav">
                <div class="back fa fa-chevron-left fa-lg" @click="back"></div>
                <div class="title">{{objname}}</div>
                <div class="more fa fa-cog fa-lg"></div>
            </div>
            <div class="content">
                <div v-for="(item,index) in charmsg" :key="index" :class="item.objuser === mine?'mymsg':'youmsg'">
                    <div class="cont">
                        <div><span>{{item.say}}</span></div>
                        <div><img :src="item.objuser === mine?header:objheader" alt="" width="100%" height="100%"></div>
                    </div>
                </div>
            </div>
            <div class="foot">
                <div class="add fa fa-angle-up fa-2x"></div>
                <div class="text"><input type="text" v-model="send"></div>
                <div class="btn"><button @click="sendmymsg">发送</button></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            charmsg:[],
            send:'',
            header:'',
            mine:'',
            phone:'',
            objname:'',
            objheader:''
        }
    },
    methods:{
        sendmymsg(){
            if(this.header === this.objheader){
                console.log('like')
            }else{
                console.log('nolike')
            }
            this.charmsg.push({objuser:this.mine,header:this.header,say:this.send})
            this.$socket.emit('chat',{objuser:this.objname,header:this.objheader,sendmsg:this.send})
        },
        back(){
            this.$router.push('/home/chat')
        }
    },
    mounted(){
        this.header = JSON.parse(window.sessionStorage.getItem('userMsg')).header
        this.mine = JSON.parse(window.sessionStorage.getItem('userMsg')).userName
        this.objheader = window.sessionStorage.getItem('objheader')
        this.objname = window.sessionStorage.getItem('chatobj')
    },
    sockets:{
        connect:()=>{
            // console.log('连接成功')
        },
        sendmsg:function(value){
            this.charmsg.push(value)
            // console.log(this.charmsg)
        },
        ids(values){
            window.sessionStorage.setItem('socketid',values)
        },
        sendone(value){
            this.charmsg.push(value)
            console.log(this.charmsg)
        }
    }
    
}
</script>

<style lang="less" scoped>
    .root{
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        background: rgb(238, 238, 238);
    }
    .time{
        width: 100%;
        height: 25px;
        // background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container{
        width: 95%;
        height: 100%;
        // border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .nav{
        width: 100vw;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #ccc;
        .back{
            width: 40px;
            height: 40px;
            // background-color: saddlebrown;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .more{
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            // background-color: saddlebrown;
        }
        .title{
            height: 100%;
            width: 50px;
            flex-grow: 1;
            display: flex;
            // justify-content: center;
            align-items: center;
            padding-bottom: 5px;
        }
    }
    .content{
        width: 100%;
        height: 50px;
        // background-color: skyblue;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow: scroll;
    }
    .foot{
        width: 100%;
        height: 45px;
        background-color: rgb(247, 247, 247);
        display: flex;
        justify-content: center;
        align-items: center;
        .add{
            width: 35px;
            height: 35px;
            display: flex;
            border: 1px solid black;
            // background-color: saddlebrown;
            background: none;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }
        .text{
            height: 40px;
            margin: 0 5px;
            flex-grow: 1;
            input{
                width: 100%;
                height: 100%;
            }
        }
        .btn{
            width: 60px;
            height: 100%;
            // background-color: blue;
            display: flex;
            justify-content: center;
            align-items: center;
            button{
                width: 100%;
                height: 35px;
                color: #fff;
                border: none;
                outline: none;
                box-shadow: 0 0 10px black;
                background-color: rgb(6, 194, 95);
            }
        }
    }
    .youmsg{
        display: flex;
        position: relative;
        margin-top: 5px;
        // min-height: 50px;
        .cont{
            display: flex;
            flex-flow: row-reverse;
            position: relative;
            // left: 0;
            div:nth-child(1){
                max-width: 250px;
                // min-height: 20px;
                background-color: #fff;
                flex-wrap: wrap;
                overflow: auto;
                padding-top: 10px;
                padding-bottom: 10px;
                span{
                    max-width: 250px;
                    text-align: left;
                    padding: 8px;
                    line-height: 20px;
                    word-wrap: break-word;
                    word-break: break-all;
                }
            }
            div:nth-child(2){
                width: 45px;
                height: 45px;
                background-color: skyblue;
                margin-right: 5px;
                // margin-left: 5px;
            }
        }
    }
    .mymsg{
        display: flex;
        position: relative;
        margin-top: 5px;
        justify-content: flex-end;
        margin-right: 50px;
        // min-height: 50px;
        .cont{
            position: relative;
            right: -55px;
            display: flex;
            justify-content: flex-end;
            div:nth-child(1){
            display: flex;
            // width: 30px;
            // height: 45px;
            background-color: rgb(149, 236, 105);
            padding-top: 2px;
            flex-wrap: wrap;
            overflow: auto;
            span{
                line-height: 20px;
                word-wrap: break-word;
                word-break: break-all;
                max-width: 250px;
                padding: 8px 8px;
            }
            }
            div:nth-child(2){
                width: 48px;
                height: 45px;
                background-color: skyblue;
                margin-left: 5px;
            }
        } 
    }
</style>
